<template>
  <div class="job-detail">
    <!-- <loding :show="Isloding"></loding> -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item @click.native="goto('/')">首页</el-breadcrumb-item>
      <template  v-for="(item, key) in breadList" :index="key">
        <el-breadcrumb-item @click.native="goto(item.routeName,key)">{{item.text}}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
    <!-- <bread :breadList=breadList></bread> -->
    <div class=""></div>
    <div class="job-detail-main">
      <div class="job-detail-title">
        <span class="job-name">{{jobData.positionName}}</span>
        <span class="job-price" v-show="!jobData.minPay">面议</span>
        <span class="job-price" v-show="jobData.minPay">{{jobData.minPay}} - {{jobData.maxPay}}k</span>
      </div>
      <div class="job-detail-date">
        <span class="job-year">{{jobData.updateDate}}</span>
        <span class="job-education" v-show="jobData.workingYears&&jobData.education">{{jobData.workingYears}}/{{jobData.education}}</span>
      </div>
      <div v-html="jobData.positionDescript"></div>
    </div>
  </div>
</template>

<script>
import bread from '@/components/breadcrumb'
import loding from '@/components/loding'
import {firstDeptTdeptList, jobDetail} from '@/api/getData'
export default {
  validate ({ params ,query}) {
    // console.log(params ,query)
    return (query.pageId && query.jobData)?true:false
  },
  data () {
      return{
       Isloding: false,   
       breadList: [
          {
            text: '',
            routeName: ''
          },
          {
            text: '岗位详情',
            routeName: ''
          }
        ],
        jobData: ''
      }
    
  },
  created(){
    firstDeptTdeptList.call(this).then(res=>{
      this.handelBread(res,this.$route.query.pageId)
    })
    this.jobData = JSON.parse(this.$route.query.jobData)
    
  },
  components: {
    bread,
    loding
  },
  methods: {
    handelBread(list,cid){
      let result = list.filter(item=>{
        return JSON.parse(cid) == item.id
      })[0]
      this.breadList = [
        {
          text: result.deptname,
          routeName: `/jobs/list/${result.id}`
        },
        {
          text: '岗位详情',
          routeName: ''
        }
      ]
      
    },
    goto(routeName,key) {
      if(key == this.breadList.length-1){
        return
      }
      this.$router.replace({ path: routeName })
    }
  }
}
</script>

<style lang="stylus" scoped>
.job-detail{
  width: 1200px;
  padding-top: 20px;
  padding-bottom: 60px;
  margin: 0 auto; 
  border-bottom: 1px solid transparent;
  min-height: 300px;
  margin-top: 58px;
  
}
.job-detail-main{
  padding: 60px 30px;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
}
.job-detail-title{
  font-size: 0;
  margin-bottom: 20px;
  span{
    display: inline-block;
  }
  .job-name{
    font-size:24px;
    font-weight:bold;
    color:rgba(30,30,30,1);
    line-height:24px;
    margin-right: 180px;
  }
  .job-price{
    font-size:24px;
    font-weight:bold;
    color:rgba(255,98,82,1);
  }
}
.job-detail-date{
  font-size: 0;
  margin-bottom: 40px;
  span{
    display: inline-block;
  }
  .job-year{
    font-size:14px;
    color:rgba(130,130,130,1);
    line-height:14px;
    margin-right: 20px;
  }
  .job-education{
    font-size:14px;
    color:rgba(130,130,130,1);
    line-height:14px;
  }
}
</style>
